<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="/static/css/login.css"/>
    <link rel="shortcut icon" href="../static/images/favicon.ico" type="image/x-icon" />
</head>
<body style="margin:0 auto;" ;>
<!--<form method="post">-->
<div class="d1">
    <div class="d2">
        {% csrf_token %}
        <div class="a1 a2">
            <label for="account" class="a4">账号</label>
        </div>
        <div style="position:absolute; z-index:2; left:30%; top:20%">
            <input id="account" name="user" type="text" class="d3">
        </div>
        <br>
        <div class="a1 a3">
            <label for="pwd" class="a4">密码</label>
        </div>
        <div style="position:absolute; z-index:2; left:30%; top:40%">
            <input id="pwd" name="pwd" type="password" class="d3">
        </div>
        <br>
        <div style="position:absolute; z-index:2; left:20%; top:60%;background-color: #30563bb8">
            <a><input id="login" type="submit" value="登录" class="d4";></a>
        </div>
        <div style="position:absolute; z-index:2; left:20%; top:75%;background-color: #30563bb8">
            <a><input id="face" type="submit" value="人脸识别" class="d4";></a>
        </div>
    </div>
</div>
<!--</form>-->
<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.cookie.js" ></script>
<script src="/static/layui/common.js" ></script>
<script>
    layui.use('layer', function() {
        $("#login").click(function () {
            var index = layer.load(3, {shade: [0.2, '#5B5B5B']});
            $.ajax({
                url: 'login.html',
                type: 'POST',
                data:{'key': 'login','account':$('#account').val(),'password':$('#pwd').val()},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('登录成功！', {icon: 1,time: 3000,end:function () {
                                window.location.href = '/index.html';
                            }});
                    }else if(base == 'false'){
                        layer.msg('账号或密码错误！', {icon: 2,end:function () {
                                layer.close(index);
                            }});
                    }else {
                        layer.msg('请填写账号或密码！', {icon: 0,end:function () {
                                layer.close(index);
                            }});
                    }
                }
            })
        });
        $("#face").click(function () {
            var index = layer.load(3, {shade: [0.2, '#5B5B5B']});
            $.ajax({
                url: 'login.html',
                type: 'POST',
                data:{'key': 'face'},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('人脸识别成功！', {icon: 6,time: 1500,end:function () {
                                window.location.href = '/index.html';
                            }});
                    }else if(base == 'false'){
                        layer.msg('人脸信息未注册！', {icon: 7,time: 1500,end:function () {
                                layer.close(index);
                            }});
                    }else if(JSON.parse(base) == null){
                        layer.msg('未检测到人脸信息！', {icon: 5,time: 1500,end:function () {
                                layer.close(index);
                            }});
                    }else if(JSON.parse(base) == 'server_stop'){
                        layer.msg('人脸识别登录未启用！', {icon: 4,time: 1500,end:function () {
                                layer.close(index);
                            }});
                    }
                    else if(JSON.parse(base) == 'No_cameras'){
                        layer.msg('没有找到可用的摄像头！', {icon: 3,time: 1500,end:function () {
                                layer.close(index);
                            }});
                    }else {
                        layer.msg('出现系统错误，请联系系统管理员！', {icon: 2,time: 1500,end:function () {
                                layer.close(index);
                            }});
                    }
                }
            })
        })
    });
    document.onkeydown = function(){
        if(window.event.keyCode == 13){
            $('#login').click()
        }
    }
</script>
<script language="JavaScript">
    if (window != top)
        top.location.href = location.href;
</script>
</body>
</body>
</html>
